<template>
  <div class="app-container">
    <div class="container_box">
      <el-row>
        <el-col :xs="24" :sm="24" :md="12" :lg="12">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="12" :lg="12">
                <el-form-item label="年月">
                  <el-date-picker
                    disabled
                    style="width: 100%"
                    v-model="YYMM_str"
                    value-format="yyyy-MM"
                    type="month"
                    @input="$forceUpdate()"
                    @change="change_YYMM"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12">
                <el-form-item label="跳過日期" prop="skipHolidays">
                  <el-input disabled v-model="form.skipHolidays" />
                  <!-- <el-date-picker
                    disabled
                    style="width: 100%"
                    type="dates"
                    v-model="form.skipHolidays"
                    @input="$forceUpdate()"
                    :picker-options="pickerOptions"
                    :default-value="default_value"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker> -->
                </el-form-item>
              </el-col>

              <el-col
                :xs="24"
                :sm="24"
                :md="12"
                :lg="12"
                v-for="item in timePeriod_list"
              >
                <el-form-item label="時間段" prop="timePeriod">
                  <el-time-picker
                    disabled
                    style="width: 100%"
                    is-range
                    arrow-control
                    @input="$forceUpdate()"
                    value-format="HH:mm"
                    v-model="item.timePeriod"
                    range-separator="至"
                    start-placeholder="開始時間"
                    end-placeholder="結束時間"
                  >
                  </el-time-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12">
                <el-form-item label="是否生效" prop="enable">
                  <el-select
                    style="width: 100%"
                    disabled
                    v-model="form.enable"
                  >
                    <el-option
                      v-for="dict in dict.type.sys_yes_no"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12">
                <el-form-item label="備註" prop="remark">
                  <el-input
                    disabled
                    v-model="form.remark"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <div style="text-align: center">
            <el-button  @click="Goback()">返 回</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
    
        <script>
import {
  listRule,
  getRule,
  delRule,
  addRule,
  updateRule,
} from "@/api/biz/rule";
export default {
  name: "RuleEdit",
  dicts: ["sys_yes_no"],
  data() {
    return {
      // 表单參數
      // 表单參數
      form: {
        remark: "",
      },
      YYMM_str: "",
      // 表单校验
      rules: {},
      timePeriod_list: [{ timePeriod: ["08:00", "18:00"] }],
      disabled_skipHolidays: true,
    };
  },
  created() {
    console.log("created");
    console.log(this.$route);
    this.getInfo(this.$route.query.id);
  },
  activated() {
    console.log("activated");
    this.getInfo(this.$route.query.id);
  },
  //     created() {
  //     console.log('created');
  //     this.form = this.$route.query;
  //     // this.bizCustomerReservationItemList =  this.form.bizCustomerReservationItemList
  //   },
  //   activated() {
  //     console.log('activated');
  //     this.form = this.$route.query;
  //     // this.bizCustomerReservationItemList =  this.form.bizCustomerReservationItemList
  //   },
  computed: {
    pickerOptions() {
      let that = this;
      return {
        disabledDate(time) {
          if (!that.YYMM_str) {
            return false;
          }
          let days = that
            .$moment([
              that.YYMM_str.split("-")[0],
              that.YYMM_str.split("-")[1] - 1,
            ])
            .daysInMonth();
          let dateStart =
            new Date(that.YYMM_str + "-01").getTime() - 24 * 60 * 60 * 1000;
          // 結束日期
          let dateEnd = new Date(that.YYMM_str + "-" + days).getTime();
          // 在開始日期和結束日期内可以選擇，其他不可選擇
          return time.getTime() < dateStart || time.getTime() > dateEnd;
          // 開始日期
        },
      };
    },
    default_value() {
      let that = this;
      return that.YYMM_str;
    },
  },
  methods: {
    insertchar(oldStr, index, newStr) {
      return oldStr.slice(0, index) + newStr + oldStr.slice(index);
    },
    getInfo(id) {
      getRule(id).then((response) => {
        console.log(response.data);
        this.form.id = response.data.id;
        this.YYMM_str = this.insertchar(response.data.ym, 4, "-");
        console.log(response.data.remark);
        this.form.remark = response.data.remark;
        this.form.enable = response.data.enable;
        this.form.skipHolidays = JSON.parse(response.data.skipHolidays);
        this.disabled_skipHolidays = false;
        this.timePeriod_list = [];
        JSON.parse(response.data.timePeriod).map((item) => {
          let obj = {
            timePeriod: [item.start, item.end],
          };
          this.timePeriod_list.push(obj);
        });
      });
    },
    change_YYMM() {
      this.form.skipHolidays = null;
      if (this.YYMM_str) {
        this.disabled_skipHolidays = false;
      } else {
        this.disabled_skipHolidays = true;
      }
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form);
      console.log(this.timePeriod_list);
      // timePeriod = [{"start":"HH:mm","end":"HH:mm"},...]
      this.form.timePeriod = [];
      this.form.ym = this.YYMM_str.split("-")[0] + this.YYMM_str.split("-")[1];
      this.timePeriod_list.map((item) => {
        let item_str = {
          start: item.timePeriod[0],
          end: item.timePeriod[1],
        };
        this.form.timePeriod.push(item_str);
      });

      let formData = {
        skipHolidays: JSON.stringify(this.form.skipHolidays),
        timePeriod: JSON.stringify(this.form.timePeriod),
        ym: this.form.ym,
        remark: this.form.remark,
        enable: this.form.enable,
      };
      console.log(formData);

      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateRule(formData).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRule(formData).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$tab.closePage().then(() => {
                // 执行結束的逻辑
                const obj = { path: "/reservation/rule", name: "Rule" };
                this.$tab.refreshPage(obj);
              });
            });
          }
        }
      });
    },

    cancel() {
      this.$tab.closePage().then(() => {
        // 执行結束的逻辑
        const obj = { path: "/reservation/rule", name: "Bank" };
        this.$tab.refreshPage(obj);
      });
    },
    Goback() {
      this.$tab.closePage().then(() => {
        // 执行結束的逻辑
        const obj = { path: "/reservation/rule", name: "Bank" };
        this.$tab.refreshPage(obj);
      });
    },
  },
};
</script>
    